<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="same.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/menu1.css">


  
    <script src="js/menu1.js"></script>
    <script src="js/animate.js"></script>
    <script src="js/same.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
    <!-- <script>
        $(function () {
            $("#tabs").tabs();
        });
    </script> -->

<!-- <script >  
    var recordCount = 0   //总记录数
    var pageSize = 9 //每页显示记录数
    var pageCount = 0     //总页数
    var pageIndex = 0     //当前页的索引值
    var caipu = []
 
    var first = document.getElementById('first')
    var previous = document.getElementById('previous')
    var next = document.getElementById('next')
    var last = document.getElementById('last')
    function setButton(f1, f2, f3, f4) {
        document.getElementById('first').disabled = f1
        document.getElementById('previous').disabled = f2
        document.getElementById('next').disabled = f3
        document.getElementById('last').disabled = f4
    }
 
    function one() {
        pageIndex = 0
        initData()
        setButton(true, true, false, false)
    }
    function two() {
        pageIndex--
        initData()
        setButton(false, false, false, false)
        if (pageIndex== 0) {
            setButton(true, true, false, false)
        }
    }
    function three() {
        pageIndex++
        initData()
        setButton(false, false, false, false)
        if (pageIndex == pageCount - 1) {
            setButton(false, false, true, true)
        }
    }
    function four() {
        index = pageCount
        pageIndex = pageCount -1
        initData()
        setButton(false, false, true, true)
    }
 
    window.onload = function () {
        recordCount = data.length
        pageCount = Math.ceil(recordCount / pageSize)
        initData()
 
    }
 
    function initData() {
        if (localStorage['caipu']) {
            caipu = JSON.parse(localStorage['caipu'])[0].cook
            //  <a href="MenuChild.html"></a>
        }
        // setButton(false,false,false,false)
        var ul = document.getElementById('products')
        var strHTML = ''
        var strHTML1 = ''
        for (var i = pageIndex * pageSize; i < (pageIndex + 1) * pageSize; i++) {
            if (data[i]) {
                strHTML += `
                    <li>
                    
                           <a href="MenuChild.html"><img src="${data[i].image}" alt="" class="productsimg">
                        <div class="relative">
                            <a href="MenuChild.html">${data[i].name}</a>
                            <p><a><img src="${data[i].image1}" alt="">${data[i].name1}</a></p>
                        </div>
                        <div class="view-coll">
                            <img src="images/s01.png" alt=""> 
                           <span class="view">${data[i].view}</span>
                           <img src="images/s02.png" alt="">
                           <span class="coll">${data[i].coll}</span>
                        </div></a>
                    </li>`
 
 
                //    console.log(caipu)
                //     console.log(data[i].name1)
                if (data[i].name1 == caipu) {
 
                    strHTML1 += `<li>
                           <img src="${data[i].image}" alt="" class="productsimg">
                        <div class="relative">
                            <a href="">${data[i].name}</a>
                            <p><a><img src="${data[i].image1}" alt="">${data[i].name1}</a></p>
                        </div>
                        <div class="view-coll">
                            <img src="images/s01.png" alt=""> 
                           <span class="view">${data[i].view}</span>
                           <img src="images/s02.png" alt="">
                           <span class="coll">${data[i].coll}</span>
                        </div>
                    </li>`
 
                }
            }
        }
        if (localStorage['caipu']) {
 
            ul.innerHTML = strHTML1
            localStorage.removeItem('caipu')
            return
        }
 
 
        ul.innerHTML = strHTML
    }
  </script>
    -->
</head>

<body>
    <header>
        <div id="header">
            <div class="logo">
                <img src="images/logo.png" alt="">
            </div>
            <ul class="nav01">
                <li><a href="index.html">首页</a ></li>
                <li><a href="Menu1.html">菜谱^ </a>
                    <dl>
                        <dt>  家常菜</dt>
                            <dd>热菜</dd>
                            <dd>主食</dd>
                            <dd>汤</dd>
                            <dd>早餐</dd>
                            <dd>午餐</dd> 
                            </dl>
                     <dl>
                            <dt>中国菜系 </dt>
                            <dd>粤菜</dd>
                            <dd>北菜</dd>
                            <dd>湘菜</dd>
                            <dd>浙菜</dd>
                            <dd>湖北菜</dd>
                     </dl>   
                       
                </li>
                <li><a href="heath.html">饮食健康^</a>
                    <dl>
                        <dt>    <a href="heath.html">饮食健康  </a> </dt>
                            <dd>饮食新闻  </dd>
                            <dd><a href="">美容瘦身  </a> </dd>
                            <dd><a href="">饮食小常识</a></dd>
                            <dd><a href="">功能性调理</a></dd>
                            <dd><a href="">清热火    </a></dd> 
                            </dl>
                     <dl>
                            <dt> <a href="heath.html">人群膳食 </a></dt>
                            <dd>减肥</dd>
                            <dd>祛痰</dd>
                            <dd>滋阴壮阳</dd>
                            <dd>健脾养胃</dd>
                            <dd>人群膳食</dd>
                     </dl>   
                     <dl>
                        <dt> <a href="heath.html">健康常识 </a></dt>
                        <dd>减肥</dd>
                        <dd>祛痰</dd>
                        <dd>滋阴壮阳</dd>
                        <dd>健脾养胃</dd>
                        <dd>人群膳食</dd>
                 </dl>
                 <dl>
                    <dt> <a href="heath.html">药膳养生 </a></dt>
                    <dd>减肥</dd>
                    <dd>祛痰</dd>
                    <dd>滋阴壮阳</dd>
                    <dd>健脾养胃</dd>
                    <dd>人群膳食</dd>
             </dl>   
                 
                     
               
                    </li>
                <li><a  href="ontes.html">笔记</a></li>
              <li>  <input type="text" placeholder="搜索菜谱，菜单，食材，用户"><input type="button" value="" id="sear"></li>
                <li><input type="button" value="发布">
                <ul>
                    <li><a href="PublishOntes.html">发布笔记</a ></li>
                    <li><a href="PublishMenu.html">发布菜谱</a ></li>
                </ul>
                </li>
                <li style="display: block;"><a href="login.html">登录</a>|<a href="zhuce.html">注册</a></li>
                 <span></span>
                <div style="clear: left;"></div>
               
                </ul>
            </div>
    </header>
    <main>
        <h3>精选推荐菜谱</h3>
        <ul id="top1">
            <li><a href="#jingxuan">精选</a></li>
            <li><a href="">最新</a></li>
            <li>分类</li>
            <li>食材</li>
           
        </ul>
        <div id="jingxuan">
           
            <ul id="products">

            </ul>



        </div>
        <ul id="pages">
            <!-- 分页 -->
            <li><input type="button" value="第一页" onclick="one()" id="first" disabled="true"></li>
            <li><input type="button" value="上一页" onclick="two()" id="previous" disabled="true"></li>
            <li><input type="button" value="下一页" onclick="three()" id="next"></li>
            <li><input type="button" value="最后一页" onclick="four()" id="last"></li>
        </ul>


    </main>
    <footer>
        <div class="foot">
            <ul class="f1">
                <li>关于食界</li>
                <li>食界美食</li>
                <li>意见反馈</li>
                <li>品牌馆</li>
                <li>菜谱大全</li>
            </ul>
            <p>@2016-2020 欢迎访问我们食界 <a href="">唯有爱与美食不可辜负</a> </p>
        </div>

    </footer>
    

   
</body>
<script >  
    var recordCount = 0   //总记录数
    var pageSize = 9 //每页显示记录数
    var pageCount = 0     //总页数
    var pageIndex = 0     //当前页的索引值
    var caipu = []
 
    var first = document.getElementById('first')
    var previous = document.getElementById('previous')
    var next = document.getElementById('next')
    var last = document.getElementById('last')
    function setButton(f1, f2, f3, f4) {
        document.getElementById('first').disabled = f1
        document.getElementById('previous').disabled = f2
        document.getElementById('next').disabled = f3
        document.getElementById('last').disabled = f4
    }
 
    function one() {
        pageIndex = 0
        initData()
        setButton(true, true, false, false)
    }
    function two() {
        setButton(false, false, false, false)
        pageIndex--
        initData()
        if (pageIndex== 0) {
            setButton(true, true, false, false)
        }
    }
    function three() {
        setButton(false, false, false, false)
        pageIndex++
        initData()
        if (pageIndex == pageCount - 1) {
            setButton(false, false, true, true)
        }
    }
    function four() {
        index = pageCount
        pageIndex = pageCount - 1
        initData()
        setButton(false, false, true, true)
    }
 
    
        recordCount = data.length
        pageCount = Math.ceil(recordCount / pageSize)
        initData()
 
    
 
    function initData() {
       if (localStorage['caipu']) {
            caipu = JSON.parse(localStorage['caipu'])[0].cook
            //  <a href="MenuChild.html"></a>
        } 
        // setButton(false,false,false,false)
        var ul = document.getElementById('products')
        var strHTML = ''
        var strHTML1 = ''
        for (var i = pageIndex * pageSize; i < (pageIndex + 1) * pageSize; i++) {
            if (data[i]) {
                strHTML += `<li>
                           <a href="MenuChild.html"><img src="${data[i].image}" alt="" class="productsimg">
                        <div class="relative">
                            <a href="MenuChild.html">${data[i].name}</a>
                            <p><a><img src="${data[i].image1}" alt="">${data[i].name1}</a></p>
                        </div>
                        <div class="view-coll">
                            <img src="images/s01.png" alt=""> 
                           <span class="view">${data[i].view}</span>
                           <img src="images/s02.png" alt="">
                           <span class="coll">${data[i].coll}</span>
                        </div></a>
                    </li>`
 
  }
    }            //    console.log(caipu)
                //     console.log(data[i].name1)
                for( var i=0;i<data.length;i++){

             
                if (data[i].name == caipu||data[i].selection == caipu){
 
                    strHTML1 += `<li>
                           <img src="${data[i].image}" alt="" class="productsimg">
                        <div class="relative">
                            <a href="">${data[i].name}</a>
                            <p><a><img src="${data[i].image1}" alt="">${data[i].name1}</a></p>
                        </div>
                        <div class="view-coll">
                            <img src="images/s01.png" alt=""> 
                           <span class="view">${data[i].view}</span>
                           <img src="images/s02.png" alt="">
                           <span class="coll">${data[i].coll}</span>
                        </div>
                    </li>`
 
                }
 
 
    }
            
       
        if (localStorage['caipu']) {
 
            ul.innerHTML = strHTML1
            localStorage.removeItem('caipu')
            return
        }
 
 
        ul.innerHTML = strHTML
    }
  </script>
</html>